<template>
  <div>
    <div id="line7"></div>
  </div>
</template>

    <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart()
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const response = await this.$http.get("alerts/commentCountsByDayLastWeek")
      if (response.status == 200) {
        const data = response.data;
        this.date = data.map(item => item.date)
        this.commentCount = data.map(item => item.commentCount)
        this.updateChartData()
      }
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("line7"));
      this.chart.setOption({
        title: {
          text: "热度趋势",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 20
          },
          top: "3%",
          left: "40%"
        },
        tooltip: {
          show: true,
          trigger: "axis",
          textStyle: {
            color: "#fff",
            fontSize: 14
          },
          backgroundColor: "rgba(18, 57, 60, .8)", //设置背景颜色
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)"
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)"
                  }
                ],
                global: false
              }
            }
          },
          borderColor: "rgba(18, 57, 60, .8)",

          formatter: function(params) {
            var htmlStr = "";
            for (var i = 0; i < params.length; i++) {
              var param = params[i];
              var xName = param.name + "-新增人数"; //x轴的名称
              var seriesName = param.seriesName; //图例名称
              var value = param.value; //y轴值
              var color = param.color; //图例颜色
              if (i === 0) {
                htmlStr += xName + "<br/>"; //x轴的名称
              }
              htmlStr += "<div>";
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                color +
                ';"></span>'; //一个点
              htmlStr += seriesName + "：" + value + "人"; //圆点后面显示的文本
              htmlStr += "</div>";
            }
            return htmlStr;
          }
        },
        color: ["#09F6FF", "#3E50FB", "#50D9A5"],
        // legend: {
        //   // icon: 'circle',
        //   // itemWidth: 10,
        //   itemGap: 4,
        //   x: "right",
        //   top: "3%",
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 13
        //     // padding:[0, 6, 0, 6],
        //   }
        // },
        grid: {
          top: "18%",
          left: "1%",
          right: "4%",
          bottom: "2%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#1C82C5"
              }
            },
            axisLabel: {
              interval: 0,
              align: "center",
              // rotate: '40',
              // margin: '25',
              textStyle: {
                fontSize: 13,
                color: "#fff"
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            boundaryGap: false,
            data: [] //this.$moment(data.times).format("HH-mm") ,
          }
        ],

        yAxis: [
          {
            type: "value",
            min: 0,
            splitNumber: 6,
            axisLine: {
              lineStyle: {
                color: "#1C82C5"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(28, 130, 197, .3)",
                type: "solid"
              }
            },
            axisLabel: {
              color: "#DEEBFF",
              textStyle: {
                fontSize: 12
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "积极",
            type: "line",
            showSymbol: true,
            symbolSize: 8,
            lineStyle: {
              normal: {
                color: "#09F6FF"
              }
            },
            itemStyle: {
              color: "#09F6FF",
              borderColor: "#09F6FF",
              borderWidth: 2
            },
            // emphasis: {
            //     itemStyle: {
            //         color: "#fff",
            //         borderColor: "#FF2E2E",
            //         borderWidth: 2,
            //     },
            // },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(9, 246, 255, .8)"
                    },
                    {
                      offset: 1,
                      color: "rgba(9, 246, 255, .2)"
                    }
                  ],
                  false
                )
              }
            },
            data: [] //data.values
          },
          // {
          //   name: "消极",
          //   type: "line",
          //   showSymbol: true,
          //   symbolSize: 8,
          //   lineStyle: {
          //     normal: {
          //       color: "#3E50FB"
          //     }
          //   },
          //   itemStyle: {
          //     color: "#3E50FB",
          //     borderColor: "#3E50FB",
          //     borderWidth: 2
          //   },
          //   // emphasis: {
          //   //     itemStyle: {
          //   //         color: "#fff",
          //   //         borderColor: "#F39800",
          //   //         borderWidth: 2,
          //   //     },
          //   // },
          //   areaStyle: {
          //     normal: {
          //       color: new this.$echarts.graphic.LinearGradient(
          //         0,
          //         0,
          //         0,
          //         1,
          //         [
          //           {
          //             offset: 0,
          //             color: "rgba(62, 80, 251, .8)"
          //           },
          //           {
          //             offset: 1,
          //             color: "rgba(62, 80, 251, .2)"
          //           }
          //         ],
          //         false
          //       )
          //     }
          //   },
          //   data: sn //data.values
          // },
          // {
          //   name: "中性",
          //   type: "line",
          //   showSymbol: true,
          //   symbolSize: 8,
          //   lineStyle: {
          //     normal: {
          //       color: "#50D9A5"
          //     }
          //   },
          //   itemStyle: {
          //     color: "#50D9A5",
          //     borderColor: "#50D9A5",
          //     borderWidth: 2
          //   },
          //   // emphasis: {
          //   //     itemStyle: {
          //   //         color: "#fff",
          //   //         borderColor: "#16D6FF",
          //   //         borderWidth: 2,
          //   //     },
          //   // },
          //   areaStyle: {
          //     normal: {
          //       color: new this.$echarts.graphic.LinearGradient(
          //         0,
          //         0,
          //         0,
          //         1,
          //         [
          //           {
          //             offset: 0,
          //             color: "rgba(80, 217, 165, .8)"
          //           },
          //           {
          //             offset: 1,
          //             color: "rgba(80, 217, 165, .2)"
          //           }
          //         ],
          //         false
          //       )
          //     }
          //   },
          //   data: sw //data.values
          // }
        ]
      });
    },
    updateChartData(){
      this.chart.setOption({
        xAxis:{
          data: this.date
        },
        series:[{
          data: this.commentCount
        }]
      })
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

    <style lang="scss" scoped>
#line7 {
  width: 100%;
  height: 40vh;
  // background-color: #554444;
}
</style>